<template>
  <div class="person">
    <!-- v-model是双向交互的，即input中输入的值会改变控制台中的值 -->
    姓:<input type="text" v-model="firstname"><br>
    名:<input type="text" v-model="lastname"><br>
    <button @click="changeFullName">将全名改成li-si</button>
    全名:<span>{{ fullname }}</span><br>
    全名:<span>{{ fullname }}</span><br>
    全名:<span>{{ fullname }}</span><br>
    全名:<span>{{ fullname }}</span><br>
    全名:<span>{{ fullname }}</span><br>
  </div>
</template>

<script lang='ts' setup name="Person">
import { ref, computed } from 'vue'

let firstname = ref('zhang')
let lastname = ref('san')
//箭头函数
//这么定义的fullName只是一个计算属性，只是可读的
// let fullname = computed(() => {
//   console.log('set,val')
//   //第一个字母转大写
//   return firstname.value.slice(0, 1).toUpperCase() + firstname.value.slice(1) + '-' + lastname.value
// })

//这么定义的fullName是一个计算属性,可读可写
let fullname = computed({
  get() {
    return firstname.value.slice(0, 1).toUpperCase() + firstname.value.slice(1) + '-' + lastname.value
  },
  //这个局部变量val指向fullname.value中的li-si
  set(val) {
    console.log('set', val)
    const [str1, str2] = val.split('-')
    firstname.value = str1
    lastname.value = str2
  }
})

function changeFullName() {
  fullname.value = 'li-si'
}

</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>